<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>装备材料清单列表</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<!--流式布局-->
<div class="layui-fluid">
    <div class="layui-card">
        <!-- head: 数据表格搜索 -->
        <div class="layui-card-header">
            <div class="layui-form">
                <!-- 搜索条件input -->
                <!-- 搜索按钮，已经使用表格的toolbar -->
            </div>
        </div>
        <!-- body: 数据表格（工具条、表格内容） -->
        <!-- 表格头工具按钮组-->
        <div id="LAY-table-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-event="add">
                <i class="layui-icon">&#xe642;添加</i>
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-event="search">
                <i class="layui-icon">&#xe615;查询</i>
            </button>
        </div>
        <div class="layui-card-body">
            <table id="LAY-table" class="layui-table layui-inline" lay-filter="LAY-table"></table>
        </div>
        <!-- other: 表格行数据按钮组-->
        <div id="LAY-table-row-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="editRemaining">
                <i class="layui-icon">&#xe642;编辑数量</i>
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="editPrice">
                <i class="layui-icon">&#xe640;编辑价格</i>
            </button>
        </div>
        <div id="test"></div>

        <input type="text" name="eqmId" class="layui-hide">
    </div>
</div>
<!--用于包装引入外部html的div-->
<!--<div id="LAY-form-display" class="layui-hide"></div>-->

<script type="text/javascript" src="../../layuiadmin/layui/layui.all.js"></script>
<script type="text/javascript" src="../../layuiadmin/default.js"></script>
<script type="text/javascript" src="../../js/utils.js"></script>
<script>


    // layui
    layui.config({
        base: '../../layuiadmin/lib/extend/' //静态资源所在路径
    }).use(['table', 'form', 'util', 'echarts'], function () {
        // do something ...
        let form = layui.form,
            table = layui.table,
            util = layui.util;


        // 父页面传参 装备id
         const eqmId = http.getParam('eqmId'), type = http.getParam('type') == 'FINISH'? 1 : null;

        /*静态变量*/
        const pre = '/equipmentList';

        const server = {
            list: pre + '/list',
            add: pre + '/add',
            update: pre + '/update',
            get: pre+ '/get',
            updateRemaining: pre + '/updateRemaining',
            updatePrice: pre+ '/updatePrice'
        }, htmlDiv = 'equipment-needs-div.html';

        /**
         * tableIns: 表格返回值
         * winIndex: 弹出层索引
         */
        let tableIns, winIndex;

        /*-----------[table]-----------*/
        tableIns = table.render({
            elem: '#LAY-table',
            url: server.list,
            autoSort: false,
            cols: [     [
                {field: 'id', title: 'ID', hide: true},
                //{field: 'equipName', title: '装备名称'},
                {field: 'goodsName', title: '所需物品名称'},
                {field: 'needs', title: '需要数量'},
                {field: 'remaining', title: '剩余数量'},
                {field: 'historyMaxPrice', title: '最高价', templet: function (d) {
                    if(d.change == 1){
                        return '<span style="color: red; font-weight: bold">'+d.historyMaxPrice+'</span>';
                    }else{
                        return d.historyMaxPrice;
                    }
                }},
                {field: 'price', title: '当前价'},
                {field: 'historyMinPrice', title: '最低价', templet: function (d) {
                        if(d.change == 2){
                            return '<span style="color: green; font-weight: bold">'+d.historyMinPrice+'</span>';
                        }else{
                            return d.historyMinPrice;
                        }
                    }},
                /*{field: 'buyable', title: '购买', templet:function (d) {
                    let html = '';
                    if(d.buyable == 1){
                        html = '<span style="color: #007DDB;">买买买</span>';
                    }else{
                        html = '<span style="color: #DD691D;">别别别</span>';
                    }
                    return html;
                }},*/
                {field: 'collectStatus', title: '完成状态', templet:function (d) {
                    let html = '';
                    if(d.collectStatus == 1) {
                        html = '<span style="color: #00f50d;">完成</span>';
                    }else{
                        html = '<span style="color: #ff0000;">未完成</span>';
                    }
                    return html;
                }},
                {width: 230, align: 'center', title: '操作', toolbar: '#LAY-table-row-bar'}
            ]],
            limit:50,
            where: {
                data: {
                    eqmId: eqmId,
                    type: type
                }
            }
        });

        // 表格头工具栏监听
        table.on('toolbar(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'add':
                    win.open('新增', htmlDiv);
                    break;
                case 'search':
                    break;
                default:
                    break;
            }
        });

        //  行工具监听
        table.on('tool(LAY-table)', function (obj) {
            let id = obj.data.id;
            switch (obj.event) {
                case 'editRemaining':
                    $.get(server.get+'/'+id, function(res){
                        if (res.code !== 0) {
                            layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                        } else {
                            let remaining = res.data.remaining;
                            win.editRemaining(id, remaining, server.updateRemaining, tableIns);
                        }
                    });
                    break;
                case 'editPrice':
                    $.get(server.get+'/'+id, function(res){
                        if (res.code !== 0) {
                            layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                        } else {
                            let price = res.data.price;
                            win.editPrice(id, price, server.updatePrice, tableIns);
                        }
                    });
                    break;
                default:
                    break;
            }
        });


        /*-----------[form]-----------*/



        /*-----------[弹出层]-----------*/
        /*const win = {
            open: function (title, id) {
                return layer.open({
                    type: 2,
                    title: title,
                    area: ['400px', '400px'],
                    content: htmlDiv,
                    btn: ['提交', '重置', '关闭'],
                    yes: function (index, layero) {
                        layero.find('iframe').contents().find('#LAY-form-submit').click();

                        return false; //禁止点击该按钮关闭
                    },
                    btn2: function (index, layero) {
                        return false;
                    },
                    success: function (layero, index) {
                        $('#LAY-form-display').removeClass('layui-hide');
                        // 触发详情
                        if (id){
                            // 给id标签赋值
                            let body = layer.getChildFrame('body', index);
                            body.find('[name="id"]').val(id);
                            // 触发按钮获取详情
                            let btn = layero.find('iframe').contents().find("#getBtn");
                            btn.click();
                        }

                        // 给装备id复制
                        let body = layer.getChildFrame('body', index);
                        body.find('[name="eqmId"]').val(eqmId);
                    }
                });
            },
            editRemaining: function(id, remaining){
                layer.prompt({
                    formType: 0,
                    value: remaining,
                    title: '剩余材料数量'
                },function(value, index, elem){
                    let params = {'id': id, 'remaining': value};
                    $.post(server.updateRemaining, JSON.stringify(params), function(res){
                        if (res.code !== 0) {
                            layer.msg('操作出错:[' + res.message + ']', {icon: 5});
                        } else {
                            layer.msg('操作成功', {icon: 6});
                            layer.close(index);
                            tableIns.reload();
                        }
                    });
                });
            },
            editPrice: function(id, price){
                layer.prompt({
                    formType: 0,
                    value: price,
                    title: '当前价格'
                },function(value, index, elem){
                    let params = {'id': id, 'price': value};
                    $.post(server.updatePrice, JSON.stringify(params), function(res){
                        if (res.code !== 0) {
                            layer.msg('操作出错:[' + res.message + ']', {icon: 5});
                        } else {
                            layer.msg('操作成功', {icon: 6, time:1000});
                            layer.close(index);
                            tableIns.reload();
                        }
                    });
                });
            },
            close: function (index) {
                layer.close(index);
            }
        };
*/
    });
</script>

</body>
</html>